import React, { } from 'react'
import { Row, Col, Carousel } from 'antd'
import { backgroundObj } from '@/utils/utils'
import defaultImg from './../image/richText.jpg';
import './index.less'

const RichText = (props) => {
    const { data = {} } = props
    const { content = '', backgroundColor, backgroundImage, top, bottom, paddingTop, paddingLeft, backgroundType } = data

    const renderBg = () => {
        if (backgroundType !== 'image') {
            return {
                background: backgroundColor
            }
        } else {
            return {
                ...backgroundObj(backgroundImage)
            }
        }
    }

    return <div gutter={[24, 24]} style={{ padding: `${paddingTop}px ${paddingLeft}px`, marginTop: top, marginBottom: bottom, ...renderBg() }} className='wxPage_displayAdvertising'>
        {content ? <div span={24}>
            <div style={{ overflowWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: content }} />
        </div> : <div span={24}>
            <div className='RichText_box' style={backgroundObj(defaultImg)}></div>
        </div>}
    </div>
}
export default RichText